<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Keep Account</title>
        <link rel="stylesheet" type="text/css" href="/res/common.css" /> 
        <style>
            .one_input_layout { width: 320px; height: 25px; float: left;}
            .one_line_layout { width: 720px; height: 30px;}
            .input_line_element { 
                float: left;
                width: 128px;       height: 20px;
                margin-top: 8px;    margin-bottom: 8px;
            }
            .budget_edit {
                resize: none;       border: 0;
                height: 22px;       width: 50px;
            }
            #budget_edit_desc   { resize: none;     border: 0; }
            #budget_des         { border: 2px;      padding: 2px; }
            #main_data          { margin-top: 28px; }
            #little_window_background {
                display: none;      position: fixed;
                left: 0;            top: 0;
                width: 100%;        height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            #little_window {
                width: 380px;       z-index: 1;
                margin: 12% auto;   overflow: auto;
                padding: 0px 30px 16px 30px;
                background: #fff;
            }

        </style>
        <script type="text/javascript" src="/res/common.js"></script>
        <script type="text/javascript" src="/res/SimpleTable.js"></script>
    </head>
    <body>
        <div id="navi_bar">
        </div>
        <div id="sidebar">
            <p class="sidebar_item" onclick="onSidebarItemClicked('sb_budget_usage_detail');" id="sb_budget_usage_detail">Budget Usage Detail</p>
            <p class="sidebar_item" onclick="onSidebarItemClicked('sb_budget_usage_brief');" id="sb_budget_usage_brief">Budget Usage Brief</p>
            <p class="sidebar_item" onclick="onSidebarItemClicked('sb_edit_budget');" id="sb_edit_budget">Edit Budget</p>
        </div>
        <!-- main_data是用于展示表格的区域-->
        <div id="main_data">
        
        </div>
        <!-- 修改预算的弹窗-->
        <div id="little_window_background">
            <div id="little_window">
                <div id="little_window_header">
                    <span style="cursor:pointer; float:right;" onclick="closePopUpWindow()">X</span>
                    <h2>Edit Budget</h2>
                </div>
                <table border="1">
                    <tr><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th></tr>
                    <tr>
                        <td><textarea class="budget_edit" id="budget_edit_1"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_2"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_3"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_4"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_5"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_6"></textarea></td>
                    </tr>
                    <tr><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th></tr>
                    <tr>
                        <td><textarea class="budget_edit" id="budget_edit_7"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_8"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_9"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_10"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_11"></textarea></td>
                        <td><textarea class="budget_edit" id="budget_edit_12"></textarea></td>
                    </tr>
                    <tr><th>All Year</th></tr>
                    <tr><td><textarea class="budget_edit" id="budget_edit_all_year"></textarea></td></tr>
                    <tr><td colspan="6"><textarea id="budget_edit_desc" placeholder="Description:"></textarea></td></tr>
                </table>
                <button onclick="onBudgetEditOkayClicked()">Okay</button>
            </div>
        </div>
    </body>
    <script>
        var allCat1BugetPlan = {};
        var currentCat1Id = 0;

        /**
         * 左側導航欄某個按鈕點擊後的操作
         * 被點擊的按鈕設置為高亮
         * 加載對應的數據，展示在table_data區域
         * sidebar_id: 左侧导航栏标签的id
         */
         function onSidebarItemClicked(sidebar_id) {
            setHighLightSidebarItem(sidebar_id);
            switch(sidebar_id) {
            case 'sb_budget_usage_detail':  showBudetUsage();     break;
            // case 'sb_budget_usage_brief':          break;
            case 'sb_edit_budget':          showBudgetplan();            break;
            // default:                        console.log('unknow sidebar_id! ' + sidebar_id);                                return;
            }
            console.log('side bar clicked:' + sidebar_id);
        }

        function budgetStatusToColor(status) {
            switch(status) {
            case 'plenty':  return 'white';
            case 'normal':  return 'white';
            case 'low':     return 'gold';
            case 'exceed':  return 'orangered';
            default:        return 'white';
            }
        }

        function onCurrentBudgetReceived(result) {
            result = JSON.parse(result);
            var opt = {};
            var budget_usage = result.data;
            var table_header = ['Cat1 Name', 'Month Budget', 'Month Left', 'Total Budget', 'Total Left', 'Year Budget', 'Year Left'];
            var tb = new SimpleTable('main_data_table', 'main_data');
            tb.setHeader(table_header);
            var row, ele;
            budget_usage.cat1_info.forEach(function(ele) {
                row = [ele.cat1_nameme, 
                    ele.month_plan, {'bgcolor':budgetStatusToColor(ele.month_status), 'text':ele.month_left}, 
                    ele.cur_total_plan, {'bgcolor':budgetStatusToColor(ele.cur_total_status), 'text':ele.cur_total_left}, 
                    ele.year_plan, {'bgcolor':budgetStatusToColor(ele.year_status), 'text':ele.year_left}];
                tb.addRow(row);
            });
            ele = budget_usage.all_cat1s_info;
            row = ['Total', 
                ele.month_plan, {'bgcolor':budgetStatusToColor(ele.month_status), 'text':ele.month_left}, 
                ele.cur_total_plan, {'bgcolor':budgetStatusToColor(ele.cur_total_status), 'text':ele.cur_total_left}, 
                ele.year_plan, {'bgcolor':budgetStatusToColor(ele.year_status), 'text':ele.year_left}];
            tb.addRow(row);
            tb.show();
        }

        function onBudgetPlanReceived(result) {
            result = JSON.parse(result);
            var opt = {};
            var plan = result.data.cat1_plan;

            // 把cat1预算内容转换成{cat1_id:budget_info}的格式
            plan.forEach(function(ele) {
                allCat1BugetPlan[ele.cat1_id] = ele;
            });
            // 生成表格
            var table_header = ['Cat1 Name', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'All Year', 'Description', 'Operate']
            var tb = new SimpleTable('main_data_table', 'main_data');
            tb.setHeader(table_header);
            var row, ele, operate_str;
            plan.forEach(function(ele) {
                operate_str = '<a href="#" onclick="' + 'editBudget(' + ele.cat1_id + ');">Edit</a>';
                row = [ele.cat1_nameme, ele.mon1, ele.mon2, ele.mon3, ele.mon4, ele.mon5, ele.mon6, ele.mon7, ele.mon8, ele.mon9, ele.mon10, ele.mon11, ele.mon12, ele.all_year, ele.descriptiontion, operate_str]
                tb.addRow(row);
            });
            operate_str = 'N/A';
            ele = result.data.all_cat1s_plan;
            row = ['Total', ele.mon1, ele.mon2, ele.mon3, ele.mon4, ele.mon5, ele.mon6, ele.mon7, ele.mon8, ele.mon9, ele.mon10, ele.mon11, ele.mon12, ele.all_year, ele.descriptiontion, operate_str]
            tb.addRow(row);
            tb.show();
        }

        function showBudetUsage() {
            clearAllSubElement('main_data');
            getUrlAsyn('/service/budget/getCurrentPlanAndUsage', onCurrentBudgetReceived);
        }

        function showBudgetplan() {
            clearAllSubElement('main_data');
            getUrlAsyn('/service/budget/getPlan', onBudgetPlanReceived);
        }

        function editBudget(cat1_id) {
            currentCat1Id = cat1_id;
            showPopUpWindow(allCat1BugetPlan[cat1_id]);
        }

        function showPopUpWindow(budget_info) {
            document.getElementById("budget_edit_1").value = budget_info.mon1;
            document.getElementById("budget_edit_2").value = budget_info.mon2;
            document.getElementById("budget_edit_3").value = budget_info.mon3;
            document.getElementById("budget_edit_4").value = budget_info.mon4;
            document.getElementById("budget_edit_5").value = budget_info.mon5;
            document.getElementById("budget_edit_6").value = budget_info.mon6;
            document.getElementById("budget_edit_7").value = budget_info.mon7;
            document.getElementById("budget_edit_8").value = budget_info.mon8;
            document.getElementById("budget_edit_9").value = budget_info.mon9;
            document.getElementById("budget_edit_10").value = budget_info.mon10;
            document.getElementById("budget_edit_11").value = budget_info.mon11;
            document.getElementById("budget_edit_12").value = budget_info.mon12;
            document.getElementById("budget_edit_all_year").value = budget_info.all_year;
            document.getElementById("budget_edit_desc").value = budget_info.descriptiontion;
            document.getElementById("little_window_background").style.display = "block";
        }

        function closePopUpWindow() {
            document.getElementById("little_window_background").style.display = "none";
        }

        function onBudgetEditOkayClicked() {
            var mon1 = encodeURIComponent(document.getElementById("budget_edit_1").value);
            var mon2 = encodeURIComponent(document.getElementById("budget_edit_2").value);
            var mon3 = encodeURIComponent(document.getElementById("budget_edit_3").value);
            var mon4 = encodeURIComponent(document.getElementById("budget_edit_4").value);
            var mon5 = encodeURIComponent(document.getElementById("budget_edit_5").value);
            var mon6 = encodeURIComponent(document.getElementById("budget_edit_6").value);
            var mon7 = encodeURIComponent(document.getElementById("budget_edit_7").value);
            var mon8 = encodeURIComponent(document.getElementById("budget_edit_8").value);
            var mon9 = encodeURIComponent(document.getElementById("budget_edit_9").value);
            var mon10 = encodeURIComponent(document.getElementById("budget_edit_10").value);
            var mon11 = encodeURIComponent(document.getElementById("budget_edit_11").value);
            var mon12 = encodeURIComponent(document.getElementById("budget_edit_12").value);
            var all_year = encodeURIComponent(document.getElementById("budget_edit_all_year").value);
            var desc = encodeURIComponent(document.getElementById("budget_edit_desc").value);
            var uri = '/service/budget/setCat1?cat1_id=' + encodeURIComponent(currentCat1Id)
                + '&mon1=' + mon1 + '&mon2=' + mon2 + '&mon3=' + mon3
                + '&mon4=' + mon4 + '&mon5=' + mon5 + '&mon6=' + mon6
                + '&mon7=' + mon7 + '&mon8=' + mon8 + '&mon9=' + mon9
                + '&mon10=' + mon10 + '&mon11=' + mon11 + '&mon12=' + mon12
                + '&all_year=' + all_year + '&descriptiontion=' + desc;
            getUrlAsyn(uri, onEditBugetResponseReceived);
        }

        function onEditBugetResponseReceived(result) {
            result = JSON.parse(result);
            var isSuccess = showServiceReturnValue(result);
            if(isSuccess == true) {
                showBudgetplan();
                closePopUpWindow();
            }
        }

        genNavBar('budget');
        showBudetUsage();
        g_current_sidebar_item_id = 'sb_budget_usage_detail';
        onSidebarItemClicked('sb_budget_usage_detail');

    </script>
</html>
